<template>
    <div class="student-info-container">
      <el-row class="student-info-header">
        <el-col :span="24">
          <h2>教师基本信息</h2>
        </el-col>
      </el-row>
      <el-row class="student-info-content">
        <el-col :span="12" class="info-item">
          <span class="label">教工号:</span>
          <span class="value">{{ teacher.teacherId }}</span>
        </el-col>
        <el-col :span="12" class="info-item">
          <span class="label">姓名:</span>
          <span class="value">{{ teacher.name }}</span>
        </el-col>
      </el-row>
      <el-row class="student-info-content">
        <el-col :span="12" class="info-item">
          <span class="label">年龄:</span>
          <span class="value">{{ teacher.age }}</span>
        </el-col>
        <el-col :span="12" class="info-item">
          <span class="label">联系方式:</span>
          <span class="value">{{ teacher.contactInfo }}</span>
        </el-col>
      </el-row>
      <el-row class="button-row">
        <el-button type="primary" @click="toggleEditMode">编辑信息</el-button>
      </el-row>
      <el-row v-if="isEditMode">
        <el-col :span="12" class="info-item">
          <el-input v-model="teacher.teacherId" placeholder="请输入教工号" disabled></el-input>
        </el-col>
        <el-col :span="12" class="info-item">
          <el-input v-model="teacher.name" placeholder="请输入姓名"></el-input>
        </el-col>
      </el-row>
      <el-row v-if="isEditMode">
        <el-col :span="12" class="info-item">
          <el-input v-model="teacher.age" placeholder="请输入年龄"></el-input>
        </el-col>
        <el-col :span="12" class="info-item">
          <el-input v-model="teacher.contactInfo" placeholder="请输入联系方式"></el-input>
        </el-col>
      </el-row>
      <el-row v-if="isEditMode" class="button-row">
        <el-button type="primary" @click="saveChanges">保存</el-button>
        <el-button @click="toggleEditMode">取消</el-button>
      </el-row>
    </div>
  </template>
  
  <script>
  import request from '../../utils/request';
  
  export default {
    data() {
      return {
        teacher: {
          teacherId: '123456',
          name: '张三',
          age: '2020-09-01',
          contactInfo: '13800138000',
        },
        isEditMode: false,
      };
    },
    methods: {
      load() {
        request.get("/teachers/message").then(res => {
          console.log(res);
          this.teacher = res.data.teacher;
          if (res.data.code === 401) {
            this.$message.error({
              message: res.data.msg,
            });
            this.$router.push("/slogin");
          }
        });
      },
      toggleEditMode() {
        this.isEditMode = !this.isEditMode;
      },
      saveChanges() {
        // 这里可以添加保存逻辑，例如调用API更新数据
        console.log('Changes saved:', this.teacher);
        request.post("/teachers/save",this.teacher).then(res =>{
            if(res.data.code == "0"){
            this.$message({
                message: res.data.msg,
                type: 'success'
               }),
            this.load()
          }else{
            this.$message.error({
                
                message: res.data.msg,
                
               })    
          }
        })
        this.toggleEditMode();
      }
    },
    created() {
      this.load();
    }
  };
  </script>
  
  <style scoped>
  .student-info-container {
    padding: 30px;
    background: linear-gradient(to right, #f2f5fa, #e1e8f4);
    border-radius: 12px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    margin-top: 20px;
  }
  .student-info-header {
    margin-bottom: 30px;
    color: #333;
  }
  .info-item {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
  }
  .label {
    font-weight: bold;
    margin-right: 20px;
    color: #666;
  }
  .value {
    color: #333;
  }
  .button-row {
    margin-top: 20px;
    text-align: center;
  }
  </style>